<template>
  <view class="tabbar">
    <view
        class="tabbar-item"
        v-for="(item, index) in list"
        :key="index"
        @click="changeTab(index)"
    >
      <image
          class="img"
          :src="item.selectedIconPath"
          v-if="current == index"
      ></image>
      <image class="img" :src="item.iconPath" v-else></image>
      <view class="text active" v-if="current == index">{{ item.text }}</view>
      <view class="text" v-else>{{ item.text }}</view>
    </view>
  </view>
</template>

<script>
import store from "@/store/index.js";
import {isLogin, login} from "../../../../utils/auth";

export default {
  name: "tabbar",
  props: {
    current: 0,
  },
  onShow() {
    uni.hideTabBar();
  },
  data() {
    return {
      list: [
        {
          pagePath: "pages/home/home",
          text: "首页",
          iconPath: "../../../../static/tab_icons/home.png",
          selectedIconPath: "../../../../static/tab_icons/home-active.png",
        },
        {
          pagePath: "pages/concert/concert",
          text: "演出",
          iconPath: "../../../../static/tab_icons/concert.png",
          selectedIconPath: "../../../../static/tab_icons/concert-active.png",
        },
        {
          pagePath: "pages/collect/collect",
          text: "想看",
          iconPath: "../../../../static/tab_icons/collect.png",
          selectedIconPath: "../../../../static/tab_icons/collect-active.png",
        },
        {
          pagePath: "pages/my/my",
          text: "我的",
          iconPath: "../../../../static/tab_icons/my.png",
          selectedIconPath: "../../../../static/tab_icons/my-active.png",
        },
      ],
    };
  },
  methods: {
    changeTab(e) {
      // e为当前选中项的索引
      // 用户没登陆 不能看想开
      if (e === 2 && !isLogin()) {
        login();
        return;
      }
      uni.switchTab({
        url: "/" + this.list[e].pagePath,
      });
    },
  },
};
</script>

<style lang="scss">
.tabbar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  height: 100upx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 30rpx 0 0;
  background-color: #ffffff;
}

.tabbar-item {
  padding: 0 40rpx;
  margin-bottom: 40rpx;
}

.img {
  margin-left: 3px;
  height: 40upx;
  width: 40upx;
}

.text {
  font-size: 26upx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #cacaca;
  line-height: 40upx;
}

.text.active {
  color: #d4237a;
}
</style>
